<template>
  <div class="login-container" ref="login" @keyup.enter.native="handleLogin">
    <top-color v-show="false"></top-color>
    <div class="login-time">
      {{ time }}
    </div>
    <div class="login-weaper animated bounceInDown">
      <div class="login-left">
        <img class="img" src="/img/bg/login-logo.png" alt="" />
        <p class="title-p">专注MES智能制造，提供优质服务</p>
        <img class="img-main" src="/img/bg/login-main.png" alt="" />
        <!-- <p class="title">{{ $t('login.info') }}</p> -->
      </div>
      <div class="login-border">
        <div class="login-main">
          <el-tabs v-model="tabName" @tab-click="handleClick">
            <el-tab-pane label="普通用户" name="userLogin">
              <userLogin></userLogin>
            </el-tab-pane>
            <el-tab-pane label="产线登录" name="lineLogin">
              <lineLogin></lineLogin>
            </el-tab-pane>
          </el-tabs>
          <!-- <h4 class="login-title">
            普通用户
            <top-lang></top-lang>
          </h4> -->
          <!-- <userLogin v-if="activeName === 'user'"></userLogin>
          <codeLogin v-else-if="activeName === 'code'"></codeLogin>
          <thirdLogin v-else-if="activeName === 'third'"></thirdLogin> -->
          <!-- <div class="login-menu">
            <a href="#" @click.stop="activeName = 'user'">{{ $t('login.userLogin') }}</a>
            <a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>
            <a href="#" @click.stop="activeName = 'third'">{{ $t('login.thirdLogin') }}</a>
          </div> -->
        </div>
      </div>
    </div>
    <a class="basicInfoSet" @click="openLoginSet"><i class="el-icon-s-tools"></i></a>
    <el-dialog class="loginSetModal" title="登录设置" append-to-body :visible.sync="isShowLoginSet" width="25%" @close="closeDialog">
      <avue-form ref="loginSet" :option="loginSetOption" v-model="loginSetForm" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="saveLoginSet"><i class="el-icon-circle-plus-outline"></i><span>保 存</span></el-button>
        <el-button size="small" @click="isShowLoginSet = false"><i class="el-icon-circle-close"></i><span>取 消</span></el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import userLogin from './userlogin';
import codeLogin from './codelogin';
import thirdLogin from './thirdlogin';
import lineLogin from './line-login';
import { mapGetters } from 'vuex';
import { dateFormat } from '@/util/date';
import { validatenull } from '@/util/validate';
import topLang from '@/page/index/top/top-lang';
import topColor from '@/page/index/top/top-color';
import { getQueryString, getTopUrl } from '@/util/util';
import { getWorkstationList, checkWorkstation } from '@/api/user';
export default {
  name: 'login',
  components: {
    userLogin,
    codeLogin,
    thirdLogin,
    lineLogin,
    topLang,
    topColor
  },
  data() {
    return {
      time: '',
      tabName: 'userLogin',
      socialForm: {
        tenantId: '000000',
        source: '',
        code: '',
        state: ''
      },
      isShowLoginSet: false,
      loginSetForm: {},
      loginSetOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '租户',
            prop: 'tenantId',
            span: 24,
            rules: [
              {
                required: true,
                message: '请输入租户ID',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '工序',
            prop: 'routeCode',
            type: 'select',
            span: 24,
            dicData: [],
            props: {
              label: 'name',
              value: 'code'
            },
            focus: () => {
              this.getWorkstation();
            }
          },
          {
            label: '工位',
            prop: 'stationCode',
            span: 24
          }
        ]
      },
      stationInfo: {}
    };
  },
  watch: {
    $route() {
      this.handleLogin();
    }
  },
  created() {
    this.handleLogin();
    this.getTime();
  },
  mounted() {},
  computed: {
    ...mapGetters(['website', 'tagWel'])
  },
  props: [],
  methods: {
    handleClick() {},
    getTime() {
      setInterval(() => {
        this.time = dateFormat(new Date());
      }, 1000);
    },
    handleLogin() {
      const topUrl = getTopUrl();
      const redirectUrl = '/oauth/redirect/';
      this.socialForm.source = getQueryString('source');
      this.socialForm.code = getQueryString('code');
      this.socialForm.state = getQueryString('state');
      if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
        let source = topUrl.split('?')[0];
        source = source.split(redirectUrl)[1];
        this.socialForm.source = source;
      }
      if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
        const loading = this.$loading({
          lock: true,
          text: '第三方系统登录中,请稍后。。。',
          spinner: 'el-icon-loading'
        });
        this.$store
          .dispatch('LoginBySocial', this.socialForm)
          .then(() => {
            window.location.href = topUrl.split(redirectUrl)[0];
            this.$router.push({ path: this.tagWel.value });
            loading.close();
          })
          .catch(() => {
            loading.close();
          });
      }
    },
    openLoginSet() {
      this.isShowLoginSet = true;
      this.loginSetForm = JSON.parse(localStorage.getItem('loginSet'));
      if (this.loginSetForm && this.loginSetForm.tenantId) {
        this.getWorkstation();
      }
    },
    saveLoginSet() {
      this.$refs.loginSet.validate((valid, done) => {
        if (valid) {
          if (this.loginSetForm.stationCode) {
            checkWorkstation(this.loginSetForm.stationCode, this.loginSetForm.tenantId).then((res) => {
              this.stationInfo = res.data.data;
              localStorage.setItem('loginSet', JSON.stringify(this.loginSetForm));
              localStorage.setItem('loginSetStationInfo', JSON.stringify(this.stationInfo));
              this.isShowLoginSet = false;
            });
          } else {
            localStorage.setItem('loginSet', JSON.stringify(this.loginSetForm));
            this.isShowLoginSet = false;
          }
          done();
        }
      });
    },
    closeDialog() {
      this.$refs.loginSet.resetFields();
      this.loginSetForm = {};
    },
    getWorkstation() {
      if (!this.loginSetForm.tenantId) {
        this.$message({
          type: 'warning',
          message: '请先输入租户ID！'
        });
        return;
      }
      getWorkstationList(this.loginSetForm.tenantId).then(
        (res) => {
          const column = this.findObject(this.loginSetOption.column, 'routeCode');
          column.dicData = this._get(res, 'data.data', []);
        },
        (error) => {
          this.workstationList = [];
        }
      );
    }
  }
};
</script>

<style lang="scss">
@import '@/styles/login.scss';
</style>
